import React from 'react';
import { connect } from 'dva';
import { Layout, Alert } from 'antd';
import Navigation from '../components/Navigation/Navigation';
import PermissionSearch from '../components/PermissionSearch/PermissionSearch';
import UserList from '../components/User/UserList';
import styles from './User.less';

const User = ({ dispatch, userList, loading }) => {
  const handlePageChange = (page) => {
    dispatch({
      type: 'userList/fetch',
      payload: { page },
    });
  };

  const handleEdit = () => {

  };

  const handleDel = () => {

  };

  return (
    <Layout style={{ padding: '0 10px' }}>
      <Navigation />
      <PermissionSearch handleEdit={handleEdit} handleDel={handleDel} />
      <UserList data={userList} loading={loading.models.userList} handlePageChange={handlePageChange} />
    </Layout>
  );
};

export default connect(({ userList, loading }) => ({
  userList,
  loading,
}))(User);
